<template>
<div class="tw-timeline" ref="listContent" :style="{backgroundColor: bgColor}">
<div class="tw-timeline-list" v-if="dataList.length>0">
  <div class="timeline-item"  ref="test1" v-for="(item, index) in dataList" :key="index">
    <div class="timeline-icon">
    </div>
    <div class="timeline-content">
      <div class="xheader">
        <div class="xtitle">{{item.title}}</div>
        <div style="padding-left:10px" class="xsubtitle">{{item.subtitle}}</div>
      </div>
      <div class="xcontent">{{item.content}}</div>
    </div>
  </div>
  <div ref="test2"></div>
</div>
  <div class="tw-libnodata" v-else></div>
</div>
</template>

<script>
const props = require('./props')

export default {
  name: 'web-timeline',

  props,

  data() {
    return {
      interval: null,
      contentHeight: 0,
      scrollHeight: 0,
      bigData: [],
      dataList: []
    }
  },

  computed: {
    style () {
      return {
        overflow: this.overflow,
        lineWidth: this.lineWidth,
        listWidth: this.listWidth,
        linecolor: this.linecolor,
        itemWidth: this.itemWidth,
        itemHeight: this.itemHeight,
        imgWidth: this.imgWidth,
        marginTop: this.marginTop,
        titleFontSize: this.titleFontSize,
        titlecolor: this.titlecolor,
        subtitleFontSize: this.subtitleFontSize,
        subtitlecolor: this.subtitlecolor,
        contentFontSize: this.contentFontSize,
        contentNum: this.contentNum,
        contentcolor: this.contentcolor,
        bgImg: this.bgImg,
        scrollbarWidth: this.scrollbarWidth,
        scrollbarBgc: this.scrollbarBgc,
        thumbBgc: this.thumbBgc,
        iconBgColor: this.iconBgColor
      }
    },
    postParams () {
      return {
        intervalTime: this.intervalTime,
        postUrl: this.postUrl
      }
    }
  },

  methods: {
    setStyle () {
      const imagewidth = Math.round(parseInt(this.imgWidth) / 2) - 1
      let style = `
        ::root.tw-timeline {
          overflow-y:  ${this.overflow};
        }
        ::root.tw-timeline::-webkit-scrollbar {
          width: ${this.scrollbarWidth};
          background-color: ${this.scrollbarBgc};
        }
        ::root.tw-timeline::-webkit-scrollbar-thumb {
          background-color: ${this.thumbBgc};
        }
        ::root.tw-timeline .tw-timeline-list {
          width:  ${this.listWidth};
          margin: ${this.marginWidth} auto;
        }
        ::root.tw-timeline .tw-timeline-list::before {
          width:  ${this.lineWidth};
          background: ${this.linecolor};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-item {
          margin-bottom:  ${this.itemHeight};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-icon {
          background:  ${this.labelcolor};
          margin-left: ${imagewidth};
          width: ${this.imgWidth};
          height: ${this.imgWidth};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-icon img {
          width: ${this.imgWidth};
          height: ${this.imgWidth};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-content {
          margin-left: ${this.itemWidth};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-content .xtitle {
          font-size: ${this.titleFontSize};
          color: ${this.titlecolor};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-content .xsubtitle {
          font-size: ${this.subtitleFontSize};
          color: ${this.subtitlecolor};
        }
        ::root.tw-timeline .tw-timeline-list .timeline-content .xcontent {
          margin-top: ${this.marginTop};
          font-size: ${this.contentFontSize};
          color: ${this.contentcolor};
          -webkit-line-clamp: ${this.contentNum};
        }

        ::root.tw-timeline .tw-timeline-list .timeline-item .timeline-icon {
          background-color: ${this.iconBgColor};
        }
      `

      if (this.bgImg[0]) {
        style += `
          ::root.tw-timeline .tw-timeline-list .timeline-icon {
            background-image: url(${this.$twApp.fileBaseUrl}${this.bgImg[0].localPath});
          }
        `
      }
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    getTableData () {
      // const path = `${'http://192.168.102.109:19000' + this.postUrl}`
      const path = `${window.$twApp.gateway + this.postUrl}`
      window.axios.post(path, {})
        .then(resp => {
          console.log(resp)
          if (resp && resp.data.pageInfo.list.length > 0) {
            const curtData = []
            resp.data.pageInfo.list.forEach(item => {
              let list = {}
              list = {
                title: item.item_slsj || '受理时间',
                subtitle: item.qd,
                content: item.item_nrzy || '内容摘要'
              }
              curtData.push(list)
            })
            this.$refs.listContent.scrollTop = 0
            this.dataList = curtData
            if (this.intervalTime && this.intervalTime !== '') {
              setTimeout(this.getTableData, this.intervalTime * 1000)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    setScroll () {
      let flag = true
      this.scrollHeight = this.$refs.listContent.scrollHeight
      const clientHeight = this.$refs.listContent.clientHeight
      clearInterval(this.interval)
      this.interval = setInterval(() => {
        if (flag && this.scrollHeight > clientHeight && this.$refs.listContent.scrollTop + clientHeight < this.scrollHeight - 1) {
          this.$refs.listContent.scrollTop = this.$refs.listContent.scrollTop + 1
        } else {
          flag = false
          const ispeed = Math.floor(-this.$refs.listContent.scrollTop / 18)
          // console.log(ispeed)
          this.$refs.listContent.scrollTop += ispeed
          if (this.$refs.listContent.scrollTop <= 0) {
            this.$refs.listContent.scrollTop = 0
            flag = true
          }
        }
      }, 30)
    },

    getp () {
      console.dir(this.$refs.listContent)
    }
  },

  mounted () {
    this.setStyle()
    this.$refs.listContent.scrollTop = 0
    this.setScroll()
    this.getTableData()
    // window.czh = this
    // this.data[0].title = new Date(new Date().getTime() - 5 * 60 * 1000 - 13000).toTimeString().substring(0, 9)
    // this.data[1].title = new Date(new Date().getTime() - 10 * 60 * 1000 - 27000).toTimeString().substring(0, 9)
    // this.data[2].title = new Date(new Date().getTime() - 15 * 60 * 1000 - 35000).toTimeString().substring(0, 9)
    // this.data[3].title = new Date(new Date().getTime() - 20 * 60 * 1000 - 59000).toTimeString().substring(0, 9)
    // this.data[4].title = new Date(new Date().getTime() - 25 * 60 * 1000 - 1000).toTimeString().substring(0, 9)
  },

  beforeDestroy () {
    clearInterval(this.interval)
    this.interval = null
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    },

    dataList: {
      deep: true,
      handler () {
        setTimeout(() => {
          this.setScroll()
        }, 1000) // 渲染完成重新获取高度
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>

<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
</style>
